.css_list {
  /* width: 100%; */
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0 15px;
}
.item {
  margin: 10px 20px;
  box-shadow: 0 3px 3px 3px #eee;
  padding: 20px;
  transition: all 0.3s ease;
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
}
::-webkit-scrollbar {
  width: 5px;
  height: 20px;
}
::-webkit-scrollbar-thumb {
  background: #556cad;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.09);
  border-radius: 2px;
}
::-webkit-scrollbar-track {
  background: #eee;
}
.item:hover {
  box-shadow: 0 4px 4px 4px #4df7bf;
}
h2 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: bold;
}
.gradient {
  background-image: linear-gradient(to bottom, red, #fff, #71e8f9);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 31px;
}
.smooth {
  width: 120px;
  height: 20px;
  background: linear-gradient(#71e8f9 0 0) 0/0% no-repeat #ddd;
  animation: p1 2s infinite linear;
}
@keyframes p1 {
  100% {
    background-size: 100%;
  }
}
.smooth_s {
  width: 120px;
  height: 20px;
  border-radius: 20px;
  background: linear-gradient(orange 0 0) 0/0% no-repeat;
  animation: p2 2s infinite steps(10);
}
@keyframes p2 {
  100% {
    background-size: 110%;
  }
}
.border_color {
  width: 120px;
  height: 120px;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}
.triangle {
  width: 0;
  height: 0;
  border: 60px solid;
  border-color: #578aef #71e8f9 #8f41e9 #ff0001;
}
.triangle_s {
  width: 0;
  height: 0;
  border-top: 60px solid #ff0001;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}
.linear {
  width: 120px;
  height: 40px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    #3fb6f7,
    rgba(255, 255, 255, 0)
  );
}
.linear_s {
  width: 120px;
  height: 40px;
  background: linear-gradient(
    88deg,
    #4df7bf 0%,
    rgba(77, 247, 191, 0.26) 12%,
    rgba(77, 247, 191, 0) 100%
  );
}
.scroll_bar {
  overflow: hidden;
  overflow-y: auto;
  max-height: 100px;
}
.scroll_bar_item {
  height: 400px;
}
.throttle_btn {
  border-style: none;
  padding: 10px 20px;
  border-radius: 4px;
  animation: throttle 3s step-end forwards;
}
.throttle_btn:active {
  animation: none;
}
@keyframes throttle {
  from {
    color: #3fb6f7;
    background: #fff;
    pointer-events: none;
  }
  to {
    color: #fff;
    background: #4df7bf;
    pointer-events: all;
  }
}
.ground_glass {
  width: 120px;
  height: 120px;
  box-sizing: border-box;
  /* backdrop-filter: blur(10px); */
  /* filter: blur(2px);
  background-color: #eee; */
  /* border: 1px solid red; */
  position: relative;
  background-image: linear-gradient(
    45deg,
    #e2e5e7,
    0%,
    #e2e5e7 40%,
    #f7f7f7 50%,
    #f7f7f7 55%,
    #e2e5e7 66%,
    #e2e5e7 100%
  );
  background-size: 400%;
  animation: ground 1s linear infinite;
}
@keyframes ground {
  from {
    background-position: 100%;
  }
  to {
    background-position: 0%;
  }
}
/* .ground_glass::after {
  position: absolute;
  content: '';
  top: 0;
  width: 50%;
  height: 100%;
  background: #eee;
  -webkit-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
  box-shadow: 0 3px 3px 0 #fff;
  border-radius: 30%;
  opacity: 0.5;
  -webkit-animation: rolled 2.5s 1s ease both infinite;
  animation: rolled 2s ease infinite;
}
@-webkit-keyframes rolled {
  0% {
    left: -200%;
  }
  100% {
    left: 200%;
  }
} */
.card_flip {
  width: 200px;
  position: relative;
  top: 0;
  height: calc(100% - 66px);
  transition: all ease 0.4s;
  backface-visibility: hidden;
}
.card_top {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 100%;
  background: url('https://dbyxs.xyz:8002/uploads/a96f5d440c47e68c71d0f8283e719a9b');
  background-repeat: no-repeat;
  background-size: cover;
  transform: rotateY(-180deg);
}
.card_bottpm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://dbyxs.xyz:8002/uploads/f168f492b7e97e2062cd6e005e5eae2a');
  background-repeat: no-repeat;
  background-size: cover;
  transform: rotateY(0deg);
  /* z-index: 10; */
}
.card_top:hover .card_top {
  transform: rotateY(-180deg);
}
.card_bottpm:hover .card_bottpm {
  transform: rotateY(180deg);
}
.spotlight {
  font-weight: bold;
  width: max-content;
  color: #999;
  position: relative;
  text-transform: uppercase;
  font-size: 100px;
  /* text-shadow: 3px 3px 3px #fff; */
}
.spotlight::after {
  content: attr(data-content);
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    rgb(236, 72, 153),
    rgb(239 68 68),
    rgb(234 179 8)
  );
  background-clip: text;
  color: transparent;
  clip-path: ellipse(100px 100px at 0% 50%);
  animation: db 3s ease-in infinite;
  text-transform: uppercase;
}
@keyframes db {
  50% {
    clip-path: ellipse(100px 100px at 100% 50%);
  }
  100% {
    clip-path: ellipse(100px 100px at 0% 50%);
  }
}
.diamond {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.diamond_img {
  width: 200px;
  height: 100px;
  object-fit: cover;
  margin: 0 -20px;
  clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
}
.diamond_img:first-child {
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%);
}
.diamond_img:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}
.text_stroke {
  font-weight: bold;
  font-size: 50px;
  -webkit-text-stroke: 2px #999;
  text-transform: uppercase;
  color: transparent;
}
.frosting {
  width: 100vw;
  max-height: 250px;
  position: relative;
}
.frosting_img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}
.modal {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  animation: frosting 6s infinite linear;
  transition: all ease;
}
/* .frosting:hover .modal {
  width: 0;
} */
@keyframes frosting {
  100% {
    width: 100%;
  }
  0% {
    width: 0%;
  }
}
.loader {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  animation: dbhalo 0.8s linear infinite;
}
.loader span {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  animation: dbhalo 0.8s linear infinite;
}
.loader span:nth-child(1) {
  filter: blur(5px);
}
.loader span:nth-child(2) {
  filter: blur(10px);
}
.loader span:nth-child(3) {
  filter: blur(25px);
}
.loader span:nth-child(4) {
  filter: blur(50px);
}
@keyframes dbhalo {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: #240229;
  border-radius: 50%;
}
.bgc {
  background: #240229;
}
.color {
  color: #fff;
}
.item_{
  display: flex;
  flex-direction: column;
 height: 640px;
  overflow: hidden;
  overflow-y: scroll;
  background-color: #000;
}
/* 图片倒影 */
.image_inverted{
  width: 200px;
  box-shadow: 0 0 8px #fff;
  -webkit-box-reflect: below 15px linear-gradient(transparent,transparent,#0005);
}